<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:pe="http://primefaces.org/ui/extensions">

<h:body>
	<ui:composition template="index_docenteSchedule.xhtml">
		<ui:define name="content">
			<p:toolbar id="titulo" style="color:#FFFFFF;font-size:125%;font-weight: bold">
			<p:toolbarGroup align="left">
				<p:outputLabel value="SISTEMA DE DISPONIBILIDAD HORARIA : #{magnaScheduleController.nombrePeriodoActual}"/>
			</p:toolbarGroup>
		    
			</p:toolbar>
			
			<h:form id="form">
				
				<p:tabView style="margin-left:0.5%;margin-right:1%;margin-top:1%"
					dynamic="true" cache="false" scrollable="true">
					<p:ajax event="tabChange"
						listener="#{magnaScheduleController.onTabChange}" />
					<p:tab title="AULA MAGNA">
						<p:schedule id="Labo1"
							value="#{magnaScheduleController.eventModelMagna}" locale="es"
							widgetVar="Labo1" view="agendaWeek" draggable="false"
							resizable="false" allDaySlot="false" slotMinutes="60"
							firstHour="8" minTime="8" maxTime="22" leftHeaderTemplate="today"
							rightHeaderTemplate="prev,next" centerTemplate="title"
							columnFormat="ddd dd/MM" timeFormat="HH:mm { - HH:mm }"
							axisFormat="HH:mm - HH:59" tooltip="true">

							<p:ajax event="eventSelect"
								listener="#{magnaScheduleController.onEventSelect}"
								update=":#{p:component('detailsPanel')}"
								oncomplete="PF('eventDialog').show();" />


						</p:schedule>

						<p:toolbar>
							<p:toolbarGroup align="left">
								<ul style="list-style:none;">
									<li>
										<p:outputLabel value="&nbsp;&nbsp;&nbsp;&nbsp;" style="background-color:green;"/>
										<p:outputLabel value="&nbsp;Peticiones aceptadas &nbsp;" />
									</li>
									<li>
										<p:outputLabel value="&nbsp;&nbsp;&nbsp;&nbsp;" style="background-color:blue;"/>
										<p:outputLabel value="&nbsp;Cursos Asignados&nbsp;" />
									</li>
									<li>
										<p:outputLabel value="&nbsp;&nbsp;&nbsp;&nbsp;" style="background-color:gray;"/>
										<p:outputLabel value="&nbsp;Peticiones en espera&nbsp;" />
									</li>
								</ul>
								<p:outputLabel
									value=" Haga clic en algun evento para más información acerca de este. " />
							</p:toolbarGroup>
							<p:toolbarGroup align="right">
								<p:commandButton id="BotonLab1"
									value=" GENERAR PETICION DE EVENTO AULA MAGNA "
									oncomplete="PF('eventDialog1').show();" />
							</p:toolbarGroup>
						</p:toolbar>
					</p:tab>
				</p:tabView>
				<p:outputPanel id="detailsPanel">
					<p:dialog id="dialogo" widgetVar="eventDialog" header="Detalles"
						showEffect="clip" hideEffect="clip">
						<p:panelGrid id="claseDetails" columns="2"
							rendered="#{magnaScheduleController.detalleClase eq true}">
							<h:outputText value="NOMBRE DE DOCENTE :" />
							<h:outputText
								value="#{magnaScheduleController.detalleClaseSelected.nombreDocente}" />
							<h:outputText value="CURSO :" />
							<h:outputText
								value="#{magnaScheduleController.detalleClaseSelected.curso}" />
							<h:outputText value="GRUPO :" />
							<h:outputText
								value="#{magnaScheduleController.detalleClaseSelected.grupo}" />
							<h:outputText value="ESCUELA :" />
							<h:outputText
								value="#{magnaScheduleController.detalleClaseSelected.escuela}" />
							<h:outputText value="HORA DE INICIO :" />
							<h:outputText
								value="#{magnaScheduleController.detalleClaseSelected.hInicio}" />
							<h:outputText value="HORA DE FIN :" />
							<h:outputText
								value="#{magnaScheduleController.detalleClaseSelected.hFin}" />
						</p:panelGrid>
						<p:panelGrid id="eventoDetails" columns="2"
							rendered="#{magnaScheduleController.detalleEvento eq true}">
							<h:outputText value="NOMBRE DE ENCARGADO :" />
							<h:outputText
								value="#{magnaScheduleController.detalleEventoSelected.nombreUsuario}" />
							<h:outputText value="NOMBRE DE EVENTO :" />
							<h:outputText
								value="#{magnaScheduleController.detalleEventoSelected.nombreEvento}" />
							<h:outputText value="HORA DE INICIO :" />
							<h:outputText
								value="#{magnaScheduleController.detalleEventoSelected.hInicio}">
								<f:convertDateTime type="date" timeZone="America/Lima"
									pattern="HH:mm:ss" />
							</h:outputText>
							<h:outputText value="HORA DE FIN :" />
							<h:outputText
								value="#{magnaScheduleController.detalleEventoSelected.hFin}">
								<f:convertDateTime type="date" timeZone="America/Lima"
									pattern="HH:mm:ss" />
							</h:outputText>
						</p:panelGrid>
					</p:dialog>
				</p:outputPanel>
			</h:form>
			<h:form id="form1">
				<p:growl id="messages" showDetail="true" />
				<p:dialog widgetVar="eventDialog1"
					header="Peticion Evento AULA MAGNA" showEffect="clip"
					hideEffect="clip">
					<p:panelGrid styleClass="panelNoBorder">
						<p:row>
							<p:column>
								<h:outputLabel value="USUARIO DE AMBIENTE  :" />
							</p:column>
							<p:column>
								<h:outputLabel value="#{magnaScheduleController.nombreUsuario}" />
							</p:column>
							<p:column>
								<p:selectBooleanCheckbox
									value="#{magnaScheduleController.soyUsuario}">
									<p:ajax update="input"
										listener="#{magnaScheduleController.activarInput}" />
								</p:selectBooleanCheckbox>
							</p:column>
						</p:row>
						<p:row>
							<p:column>
								<h:outputLabel value=" " />
							</p:column>
							<p:column>
								<h:outputLabel value=" OTRA PERSONA " />
							</p:column>
							<p:column>
								<p:inputText id="input"
									value="#{magnaScheduleController.peticionDoc.nombreUsuario}"
									disabled="#{magnaScheduleController.esUsuario eq 1}" />
							</p:column>
						</p:row>
					</p:panelGrid>
					<h:panelGrid id="eventDetails1" columns="2"
						style="text-align:center;margin-left:auto;margin-right:auto">

						<h:outputLabel for="nombreE" value="NOMBRE EVENTO :" />
						<p:inputText id="nombreE"
							value="#{magnaScheduleController.peticionDoc.nombreEvento}" />
						<h:outputLabel for="EM" value="CORREO ELECTRONICO :" />
						<p:inputText id="EM"
							value="#{magnaScheduleController.peticionDoc.email}" />
						<h:outputLabel for="aulaL" value="AULA :" />
						<h:outputText id="aulaL" value="AULA MAGNA" />


						<h:outputLabel for="idCalendar" value="FECHA" />
						<p:calendar id="idCalendar" required="true"
							requiredMessage="Ingrese la Fecha de Inicio" size="15"
							mindate="#{magnaScheduleController.inicioCalendar}"
							value="#{magnaScheduleController.peticionDoc.dia}"
							readonlyInput="true"
							onchange="#{magnaScheduleController.esDiaDeHoy()}">
							<p:ajax event="dateSelect" update="idCalendar hI HF" />
						</p:calendar>

						<h:outputLabel for="hI" value="HORA DE INICIO :" />
						<p:calendar id="hI"
							value="#{magnaScheduleController.peticionDoc.hInicio}"
							required="true" requiredMessage="Ingrese La Hora de Inicio"
							pattern="HH:mm"
							minHour="#{magnaScheduleController.mismoDia ? magnaScheduleController.horaMinimaInicio.getHours() : 8}"
							maxHour="#{magnaScheduleController.horaMaximaInicio.getHours()}"
							maxMinute="0"
							minMinute="0"
							timeOnly="true" readonlyInput="true">
							<p:ajax event="dateSelect" update="idCalendar HF" />
						</p:calendar>

						<h:outputLabel for="HF" value="HORA DE FIN :" />
						<p:calendar id="HF"
							value="#{magnaScheduleController.peticionDoc.hFin}"
							required="true" requiredMessage="Ingrese la Hora de Fin"
							pattern="HH:mm"
							minHour="#{magnaScheduleController.horaMinimaFin.getHours()}"
							maxHour="22"
							minMinute="0"
							maxMinute="0"
							timeOnly="true" readonlyInput="true">
							<p:ajax event="dateSelect" update="idCalendar hI" />
						</p:calendar>

						<h:outputLabel for="NR" value="NUMERO DE SEMANAS :" />
						<p:spinner id="NR" required="true"
							requiredMessage="Ingrese la Duración en Semanas del Evento"
							value="#{magnaScheduleController.peticionDoc.numRep}" min="1" />
						<h:outputLabel for="MT" value="MOTIVO" />
						<h:inputTextarea id="MT"
							value="#{magnaScheduleController.peticionDoc.motivo}" />
						<h:outputLabel value="ALQUILER? " />
						<p:selectBooleanCheckbox
							value="#{magnaScheduleController.esAlquiler}">
							<p:ajax listener="#{magnaScheduleController.validarAlquiler}" />
						</p:selectBooleanCheckbox>
						
						<p:commandButton id="addButton1" value="Enviar Peticion" 
							action="#{magnaScheduleController.verificarCruce}"
							update=":formC:"/>
						<p:commandButton id="cancelButton1" value="Cancelar Peticion"
							action="#{magnaScheduleController.botonCancelarDialog}"
							update=":form,:form1" >
							<p:confirm header="Cancelar" message="¿Está seguro que desea cancelar la acción? (Se perderá la información ingresada)" 
									icon="ui-icon-alert"/>
						</p:commandButton>
						<p:confirmDialog global="true" showEffect="fade" >
							<p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
       						<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
						</p:confirmDialog>
							<!-- "PF('eventDialog1').hide();"  -->
					</h:panelGrid>
				</p:dialog>
			</h:form>
			<h:form id="formC">
				<p:dialog header="Confirmacion" widgetVar="conDialog"
					resizable="false" id="conDig" showEffect="fade"
					hideEffect="explode" modal="false" closeOnEscape="true"
					closable="true" style="text-align:center">
					
						<h:panelGrid id="display" columns="2" cellpadding="1"
							style="text-align:center;margin-left:auto;margin-right:auto"
							rendered="#{!((magnaScheduleController.cruceFinal) eq 1)}">
							<h:outputText value="Nombre de Usuario del Ambiente:" />
							<h:outputText
								value="#{magnaScheduleController.peticionDoc.nombreUsuario}" />
							<h:outputText value="Correo Electronico:" />
							<h:outputText
								value="#{magnaScheduleController.peticionDoc.email}" />
							<h:outputText value="Nombre Evento:" />
							<h:outputText
								value="#{magnaScheduleController.peticionDoc.nombreEvento}"
								style="font-weight:bold" />
							<h:outputText value="AULA:" />
							<h:outputText value="AULA MAGNA" />
							<h:outputText value="Motivo:" />
							<h:outputText
								value="#{magnaScheduleController.peticionDoc.motivo}" />
							<h:outputText value="Numero de Semanas:" />
							<h:outputText
								value="#{magnaScheduleController.peticionDoc.numRep}" />
							<h:outputText value="Hora Inicio:" />
							<h:outputText
								value="#{magnaScheduleController.peticionDoc.hInicio}">
								<f:convertDateTime type="date" timeZone="America/Lima"
									pattern="HH:mm" />
							</h:outputText>
							<h:outputText value="Hora Fin:" />
							<h:outputText value="#{magnaScheduleController.peticionDoc.hFin}">
								<f:convertDateTime type="date" timeZone="America/Lima"
									pattern="HH:mm" />
							</h:outputText>
						</h:panelGrid>
						<p:panelGrid id="crucePet"
							style="text-align:center;border-color:white;border-style:none"
							columns="1"
							rendered="#{(magnaScheduleController.cruceFinal) eq 2}">
							<h:outputText
								value="SU PETICION GENERA CONFLICTOS CON PETICIONES AUN NO EVALUADAS : "
								style="font-weight:bold" />
							<ui:repeat value="#{magnaScheduleController.error}" var="error">
								<h:outputText value="#{error}" />
								<br />
							</ui:repeat>
							<h:outputText value="DESEA ENVIAR LA PETICION DE TODAS FORMAS? "
								style="font-weight:bold" />
							<h:outputText
								value="ADVERTENCIA : DE ENVIAR LA PETICION , LA EVALUACION DE LA PEITICION QUEDA A DISCRECION DEL ENCARGADO DE AULA MAGNA"
								style="font-weight:bold;color:red" />
						</p:panelGrid>
						<p:panelGrid id="denegPet"
							style="text-align:center;border-color:white;border-style:none"
							columns="1"
							rendered="#{(magnaScheduleController.cruceFinal) eq 1}">
							<h:outputText
								value="LAMENTABLEMENTE SU PETICION NO PUEDE PROCEDER YA QUE GENERA CONFLICTOS DE HORARIOS CON CLASES O EVENTOS APROBADOS"
								style="font-weight:bold;color:red" />
						</p:panelGrid>
						<h:panelGrid id="botones" columns="3" cellpadding="1"
							style="margin: 0 auto;">

							<p:commandButton id="AceptarBoton" value="Enviar Peticion"
								style="background-image:none;background-color:green"
								icon="ui-icon-gear"
								action="#{magnaScheduleController.registrarPeticion}"
								update=":form,:formC"
								onstart="PF('statusDialog').show(),PF('conDialog').hide()"
								oncomplete="PF('statusDialog').hide(),PF('okDialog').show()"
								rendered="#{!((magnaScheduleController.cruceFinal) eq 1)}">
							</p:commandButton>
							<!-- MODIFICACION REALIZADA -->
							<p:commandButton id="cancelarBoton" value="Cancelar Peticion"
								action="#{magnaScheduleController.limpiarCampos}"
								update=":form,:form1"
								style="background-image:none;background-color:black"
								icon="ui-icon-gear" oncomplete="PF('conDialog').hide();">
							</p:commandButton>
							<!-- FIN MODIFICACION REALIZADA -->
						</h:panelGrid>
					
				</p:dialog>
				<p:dialog header="Confirmacion" widgetVar="okDialog"
					resizable="false" id="okDig" showEffect="fade" hideEffect="explode"
					modal="false" closeOnEscape="false" closable="false"
					style="text-align:center" draggable="false">
					
						<h:panelGrid id="Denied"
							style="text-align:center;margin-left:auto;margin-right:auto"
							columns="1" cellpadding="1">
							<h:outputText
								value="PETICION ENVIADA SATISFACTORIAMENTE , ESPERE RESPUESTA"
								style="font-weight:bold;color:green">
							</h:outputText>
						</h:panelGrid>
						<p:commandButton id="OkBotonD" value="OK "
							update=":#{p:component('form')}"
							style="background-image:none;background-color:black"
							icon="ui-icon-gear"
							oncomplete="PF('okDialog').hide(),PF('statusDialog).hide()">
						</p:commandButton>
					
				</p:dialog>
				<p:dialog widgetVar="statusDialog" modal="false" draggable="false"
					closable="false" resizable="false" showHeader="true"
					header="PROCESANDO...">
					<h:panelGrid
						style="text-align:center;margin-left:auto;margin-right:auto"
						columns="1">
						<h:outputText value="ESTAMOS PROCESANDO SU PETICION..." />
						<br />
						<p:graphicImage value="/resources/img/progress_bar.gif"
							style="text-align:center;margin-left:auto;margin-right:auto" />
					</h:panelGrid>
				</p:dialog>
				<p:dialog widgetVar="validDialog" modal="false"
					closable="true" resizable="false" showHeader="true"
					width="500" height="300" header="Error">
					<h:panelGrid id="pnlValidarCampos"
						style="text-align:center;margin-left:auto;margin-right:auto"
						columns="1">
						<h:outputText value="Hay datos ingresados no válidos:" />
						<br />
						<h:outputText value="OTRA PERSONA: El nombre de la persona no esta especificado." rendered="#{magnaScheduleController.campoVacioOtraPersona}"/>
						<h:outputText value="OTRA PERSONA: El nombre de la persona no debe contener números." rendered="#{magnaScheduleController.campoVacioOtraPersona eq false and magnaScheduleController.noHayNumerosOtraPersona eq false ? true : false}"/>
                        <h:outputText value="NOMBRE EVENTO: El nombre del evento no esta espeficicado." rendered="#{magnaScheduleController.campoVacioNombreEvento}"/>
                        <h:outputText value="CORREO ELECTRONICO: El correo electronico no esta especificado." rendered="#{magnaScheduleController.campoVacioEmail}"/>
                        <h:outputText value="CORREO ELECTRONICO: El correo electronico no esta con su formato respectivo." rendered="#{magnaScheduleController.campoVacioEmail eq false and magnaScheduleController.campoEmailFormato eq false?true:false}"/>
                        <h:outputText value="FECHA: El dia del evento no esta especificado." rendered="#{magnaScheduleController.campoVacioFecha}"/>
                        <h:outputText value="HORA DE INICIO: La hora de inicio del evento no esta especificada." rendered="#{magnaScheduleController.campoVacioHoraInicio}"/>
                        <h:outputText value="HORA DE FIN: La hora de final del evento no esta especificada." rendered="#{magnaScheduleController.campoVacioHoraFin}"/>
                        <h:outputText value="NUMERO DE SEMANAS: El numero de semanas del evento no esta adecuadamente especificado, debe ser mayor o igual a 1." rendered="#{magnaScheduleController.campoVacioNumSemanas}"/>
                        <h:outputText value="MOTIVO: El motivo del evento no esta especificado." rendered="#{magnaScheduleController.campoVacioMotivo}"/>
						
					</h:panelGrid>
				</p:dialog>
			</h:form>
			<script type="text/javascript">
				PrimeFaces.locales['es'] = {
					closeText : 'Cerrar',
					prevText : 'Anterior',
					nextText : 'Siguiente',
					currentText : 'Esta Semana',
					monthNames : [ 'Enero', 'Febrero', 'Marzo', 'Abril',
							'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre',
							'Octubre', 'Noviembre', 'Diciembre' ],
					monthNamesShort : [ 'Ene', 'Feb', 'Mar', 'Abr', 'May',
							'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic' ],
					dayNames : [ 'Domingo', 'Lunes', 'Martes', 'Miercoles',
							'Jueves', 'Viernes', 'Sábado', ],
					dayNamesShort : [ 'Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa' ],
					dayNamesMin : [ 'Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa' ],
					weekHeader : 'Semana',
					firstDay : 1,
					isRTL : false,
					showMonthAfterYear : false,
					yearSuffix : '',
					month : 'Mes',
					week : 'Semana',
					day : 'Dia',
					allDayText : 'Todo el Dia'
				};
			</script>
			<style type="text/css">
.value {
	width: 1000px;
}

.clase .fc-event-inner {
	background: blue;
}

.evento .fc-event-inner {
	background: green;
}

.pendiente .fc-event-inner {
	background: gray;
}

.ceups .fc-event-inner {
	background: red;
}

.upg .fc-event-inner {
	background: yellow;
}

.panelNoBorder, .panelNoBorder tr, .panelNoBorder td {
	border: hidden;
	border-color: white;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
</style>
		</ui:define>
	</ui:composition>
</h:body>
</html>
